import React, { Component } from 'react';
import { View, Image } from '@tarojs/components';
import { AtButton, AtCheckbox, AtForm, AtInput, AtFloatLayout, AtList, AtListItem, AtNavBar } from "taro-ui";
import Taro from '@tarojs/taro';
import "./useradmindetail.less";
import config from '../../config.json';
import { Picker } from "antd-mobile";


enum authority {
    "管理员" = 2,
    "超级管理员" = 1,
    "一般用户" = 3
}

const authorityCol = [
    {
        label: "管理员",
        value: "2"
    },
    {
        label: "超级管理员",
        value: "1"
    },
    {
        label: "一般用户",
        value: "3"
    },
]

class UsersAdminDetail extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            uid: Taro.getStorageSync("user-admin-uid"),
            authority: parseInt(Taro.getStorageSync("user-admin-authority")),
            Opened: false,
            isSelect: false,
            array1: [],
            array2: [],
            datas1: [],
            datas2: [],
            checkedList1: [],
            checkedList2: [],
            userData: null,
            authority_picker_visble: false
        }
    }

    toggleView() {
        this.setState((state) => {
            state.isSelect = !state.isSelect;
            return state;
        });
    }

    onAdd() {
        console.log(2);

        this.setState({
            Opened: true,
        })

    }
    Close() {
        this.setState({
            Opened: false,
        })
    }
    handleChange1(value) {
        this.setState({
            checkedList1: value
        })
    }
    handleChange2(value) {
        this.setState({
            checkedList2: value
        })
    }
    onSubmit() {
        let _this = this;
        Taro.request({
            url: config.domainName + "/user/admin/setmeetroom",
            method: "POST",
            data: {
                uid: _this.state.uid,
                rooms: _this.state.checkedList2
            },
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    Taro.showToast({
                        title: '添加成功',
                        icon: "success"
                    })
                    _this.setState({
                        Opened: false,
                        isSelect: false
                    });
                    _this.load();

                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }
            },
            fail() {
                console.log("获取失败!");
            }
        })
    }
    onDelete() {
        let _this = this;
        Taro.request({
            url: config.domainName + "/user/admin/deletemeetroom",
            method: "POST",
            data: {
                umids: _this.state.checkedList1
            },
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    Taro.showToast({
                        title: '删除成功',
                        icon: "success"
                    })
                    _this.setState({
                        Opened: false,
                        isSelect: false
                    });
                    _this.load();


                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }
            },
            fail() {
                console.log("获取失败!");
            }
        })
    }
    componentDidMount() {
        this.load();
        this.loadUser();
    }

    load() {
        let _this = this;
        Taro.request({
            url: config.domainName + "/user/admin/querymeetroom",
            method: "GET",
            data: {
                uid: this.state.uid
            },
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    _this.setState({
                        array1: res.data.data,
                    });
                    _this.setState({
                        datas1: res.data.data.map((item) => {
                            return {
                                value: item.umid,
                                label: item.name,
                                desc: item.note ? item.note : "没有描述"
                            }
                        })
                    })
                    console.log(_this.state.datas);
                    console.log("获取成功!");
                    console.log(_this.state);
                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }
            },
            fail() {
                console.log("获取失败!");
            }
        })
        Taro.request({
            url: config.domainName + '/meetroom/query',
            method: 'GET',
            data: {
                search: '',
                id: '',
            },
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    _this.setState({
                        array2: res.data.data,
                    });
                    _this.setState({
                        datas2: _this.state.array2.map((item) => {
                            return {
                                value: item.mid,
                                label: item.name,
                                desc: item.note ? item.note : "没有描述"
                            }
                        })
                    })
                    console.log("获取成功!");
                    console.log(_this.state);
                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }

            },
            fail() {
                console.log("获取失败!");
            }
        })

    }

    async loadUser() {
        let _this = this;
        let userRes = await Taro.request({
            url: config.domainName + "/user/queryByUid",
            data: { uid: _this.state.uid },
            header: {
                "token": Taro.getStorageSync("token")
            }
        });
        this.setState({
            userData: userRes.data.data,
            authority: userRes.data.data.authority
        });
    }

    render() {
        return (
            <>
                <AtNavBar
                    onClickLeftIcon={() => { Taro.navigateBack() }}
                    color='#000'
                    title='用户详情'
                    leftIconType="chevron-left"
                />
                <>
                    <View style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginRight: "20px" }}>
                        <View className="module-title">用户信息</View>
                    </View>
                    {this.state.userData
                        ? (
                            <AtList>
                                <AtListItem title="名字" extraText={this.state.userData.name} />
                                <AtListItem title="系部" extraText={this.state.userData.department} />
                                <AtListItem onClick={() => {
                                    this.setState({
                                        authority_picker_visible: true
                                    })
                                }} title="身份" extraText={authority[this.state.userData.authority]} />
                                <Picker
                                    columns={[authorityCol]}
                                    visible={this.state.authority_picker_visible}
                                    onClose={() => {
                                        this.setState({
                                            authority_picker_visible: false
                                        });
                                    }}
                                    onConfirm={async (val) => {
                                        const authority = parseInt(val[0]);
                                        let res = await Taro.request({
                                            url: config.domainName + "/user/setAuthority",
                                            header: {
                                                "token": Taro.getStorageSync("token")
                                            },
                                            method: "POST",
                                            data: {
                                                uid: this.state.uid,
                                                authority: authority
                                            }
                                        });
                                        if (!res.data.code) {
                                            Taro.showToast({
                                                icon: "success",
                                                title: "操作成功"
                                            });
                                            this.loadUser();
                                        }
                                    }}
                                    defaultValue={["" + this.state.userData.authority]}
                                />
                                <AtListItem title="备注" extraText={this.state.userData.note} />
                            </AtList>
                        )
                        : ""
                    }
                    {(() => {
                        if (this.state.authority === 2) {
                            return (
                                <>
                                    <View style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginRight: "20px" }}>
                                        <View className="module-title">管理会议室列表</View>
                                        <View
                                            onClick={this.toggleView.bind(this)}
                                        >
                                            {this.state.isSelect ? <View className="primary-color-text">取消</View> : <Image style={{ height: "0.8rem", width: "0.8rem" }} src={config.domainName + "/列表设置.png"} />}
                                        </View>
                                    </View>
                                    {
                                        this.state.isSelect ? <AtCheckbox
                                            options={this.state.datas1}
                                            selectedList={this.state.checkedList1}
                                            onChange={this.handleChange1.bind(this)}
                                        /> :
                                            <AtList>
                                                {
                                                    this.state.array1.map((item) => {
                                                        return (
                                                            <AtListItem
                                                                title={item.name}
                                                                note={"面积：" + item.area + " | " + "投影仪：" + (() => { if (item.projector) { return "可用" } else { return "不可用" } })() + " | " + "网络：" + (() => { if (item.wifi) { return "可用" } else { return "不可用" } })()}
                                                            />
                                                        )
                                                    })
                                                }
                                            </AtList>
                                    }

                                    {this.state.isSelect ? <IconDelBtn onClick={this.onDelete.bind(this)} /> : <IconAddBtn onClick={this.onAdd.bind(this)} />}
                                    <AtFloatLayout
                                        isOpened={this.state.Opened}
                                        title="添加会议室"
                                        onClose={this.Close.bind(this)}
                                    >
                                        <AtCheckbox
                                            options={this.state.datas2}
                                            selectedList={this.state.checkedList2}
                                            onChange={this.handleChange2.bind(this)}
                                        />
                                        <AtButton type="primary" onClick={this.onSubmit.bind(this)}>添加</AtButton>
                                    </AtFloatLayout>
                                </>
                            )
                        } else {
                            return ""
                        }
                    })()}

                </>
            </>
        )
    }
}

class IconAddBtn extends Component<{ onClick: any }, any> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View onClick={this.props.onClick} className={`at-icon at-icon-add`} style={{
                position: "fixed",
                right: "50px",
                bottom: "50px",
                fontSize: "30px",
                padding: "10px",
                color: "#888",
                border: "1px solid #ddd",
                borderRadius: "50%",
                boxShadow: "0 0 10px 5px #eee"
            }}></View>
        )
    }
}

class IconDelBtn extends Component<{ onClick: any }, any> {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <>

                <View onClick={this.props.onClick} className={`at-icon at-icon-trash`} style={{
                    position: "fixed",
                    right: "50px",
                    bottom: "50px",
                    fontSize: "30px",
                    padding: "10px",
                    color: "red",
                    border: "1px solid #ddd",
                    borderRadius: "50%",
                    boxShadow: "0 0 10px 5px #eee"
                }}></View>
            </>
        )
    }
}



export default UsersAdminDetail;